<div [@routerTransition] (click)="clickContainer()">
    <div class="content d-flex flex-column flex-column-fluid">
        <sub-header [title]="'PublicAccountManage' | localize" [description]="nickName">
            <div role="actions">
            </div>
        </sub-header>

        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <tabset class="fortuneTabset">
                        <tab heading="{{l('MenuSetting')}}" customClass="m-tabs__item" (selectTab)="getList()">
                            <div class="col-xs-12 text-right" style="margin-bottom:1vw;">
                                <button (click)="createItem()" class="btn btn-primary blue">
                                    <i class="fa fa-plus"></i> {{l("add")}}{{l('MenuSetting')}}</button>
                            </div>
                            <div class="row align-items-center">
                                <!--<Primeng-Datatable-Start>-->
                                <div class="primeng-datatable-container" [busyIf]="MenuPrimengTableHelper.isLoading">
                                    <p-table #dataTable (onLazyLoad)="getList($event)"
                                        [value]="MenuPrimengTableHelper.records"
                                        [rows]="MenuPrimengTableHelper.defaultRecordsCountPerPage" [paginator]="false"
                                        [lazy]="true" [resizableColumns]="MenuPrimengTableHelper.resizableColumns"
                                        [responsive]="MenuPrimengTableHelper.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width: 15%">{{l('Actions')}}</th>
                                                <th style="width:5%">{{l('RecordId')}}</th>
                                                <th>{{l('name')}}</th>
                                                <th>{{l('createTime')}}</th>
                                                <th>{{l('inUse')}}</th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                                            <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                                <td>
                                                    <div class="btn-group dropdown" dropdown normalizePosition>
                                                        <button class="dropdown-toggle btn btn-sm btn-primary"
                                                            data-toggle="dropdown" dropdownToggle aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <i class="fa fa-cog"></i>
                                                            <span class="caret"></span> {{l("Actions")}}
                                                        </button>
                                                        <ul class="dropdown-menu" *dropdownMenu>
                                                            <li>
                                                                <a class="icon-bianji dropdown-item"
                                                                    (click)="editItem(record)">{{l('Edit')}}</a>
                                                            </li>
                                                            <li>
                                                                <a class="icon-xunhuan dropdown-item"
                                                                    (click)="publishItem(record)">{{l('Publish')}}</a>
                                                            </li>
                                                            <li>
                                                                <a class="icon-icon-test dropdown-item"
                                                                    (click)="deleteItem(record)">{{l('Delete')}}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td style="width:5%"> {{transIndex(i)}}</td>
                                                <td>
                                                    <span>{{record.displayName}}</span>
                                                </td>
                                                <td>
                                                    <span>{{record.creationTime| date : "yyyy/MM/dd"}}</span>
                                                </td>
                                                <td>
                                                    <span *ngIf="record.status">{{l('Yes')}}</span>
                                                    <span *ngIf="!record.status">{{l('No')}}</span>
                                                </td>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="emptymessage" let-records>
                                            <tr *ngIf="MenuPrimengTableHelper.records">
                                                <td colspan="5">
                                                    <img class="emptymessage"
                                                        src="/assets/common/images/placeholder/deviceHolder.png" />
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="MenuPrimengTableHelper.defaultRecordsCountPerPage"
                                            #paginator (onPageChange)="getList($event)"
                                            [totalRecords]="MenuPrimengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="MenuPrimengTableHelper.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{l('TotalRecordsCount', MenuPrimengTableHelper.totalRecordsCount)}}
                                        </span>
                                    </div>
                                </div>
                                <!--<Primeng-Datatable-End>-->
                            </div>
                        </tab>
                        <tab heading="{{l('MediasManage')}}" customClass="m-tabs__item" (selectTab)="getMedia()">
                            <div class="row align-items-center mb-4">
                                <!-- <div class="col-3">
                                <div class="form-group kt-form__group align-items-center">
                                    <label>{{l('tags')}}</label>
                                    <div class="input-group">
                                        <select #TypeCombobox2 class="form-control" [(ngModel)]="tagId" name="tagId"
                                            [attr.data-live-search]="true" jq-plugin="selectpicker">
                                            <option value="">{{l('All')}}</option>
                                            <option [value]="tag.id" *ngFor="let tag of Tags">{{tag.value}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div> -->

                                <div class="col-2 form-group">
                                    <app-high-tree #highTree [treeList]="Tags" [selfConfig]="{labelName:l('tags')}"
                                        [config]="{name:'value',preciseMatch:false}"
                                        (onTreeUpdate)="onTreeUpdate($event)"></app-high-tree>
                                </div>


                                <!-- 暂时隐藏 -->
                                <div class="col-3" style="position:relative;">
                                    <div class="form-group kmt-form__group align-items-center">
                                        <label>{{l('CreationTime')}}</label>
                                        <date-range-picker [showButton]="false" [needInitDate]="true"
                                            rangeMode="history" [(startDate)]="startTime" [(endDate)]="endTime">
                                        </date-range-picker>
                                    </div>
                                </div>

                                <div class="col-1">
                                    <div class="form-group m-form__group align-items-center">
                                        <label>&nbsp;</label>
                                        <div class="input-group">
                                            <button type="button" class="btn btn-primary"
                                                [buttonBusy]="MediaPrimeng.isLoading" (click)="getMedia()">
                                                <i class="la la-refresh"></i>
                                                {{l("search")}}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2" style="max-width: fit-content;">
                                    <div class="form-group m-form__group align-items-center">
                                        <label>&nbsp;</label>
                                        <div class="input-group">
                                            <button type="button" class="btn btn-primary" [buttonBusy]="SyncingData"
                                                (click)="SynchronousData()">
                                                <i class="icon-tongbu2"></i>
                                                {{l("SynchronousData")}}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2" style="margin-top:1rem;">
                                    <div class="btn-group dropdown" #dropdown1="bs-dropdown" dropdown
                                        [autoClose]="false" *ngIf="isGranted('Pages.Tenant.Products.Edit')">
                                        <button class="btn btn-primary dropdown-toggle icon-biaoqian2" type="button"
                                            id="setTagButton" data-toggle="dropdown" dropdownToggle aria-haspopup="true"
                                            aria-expanded="false">
                                            {{l('setTag')}}
                                        </button>
                                        <div class="dropdown-menu" *dropdownMenu aria-labelledby="setTagButton"
                                            x-placement="bottom-start">
                                            <form class="px-4 py-3 noPaddingBottom">
                                                <div class="form-group">
                                                    <input class="form-control" name="tagFilter"
                                                        [placeholder]="l('enterToSearch')" [(ngModel)]="tagFilter"
                                                        (keyup.enter)="filterTags()" />
                                                </div>
                                                <div class="form-group beautyScroll noPaddingBottom">
                                                    <app-my-tree #tagTree [(items)]="tagList" [config]="tagConfig">
                                                    </app-my-tree>
                                                </div>
                                            </form>
                                            <div class="dropdown-divider"></div>
                                            <a *ngIf="!tagIds || tagIds.length==0" class="icon-apply dropdown-item"
                                                (click)="goTag(8)">{{l('Create')+l('Tags')}}</a>
                                            <a *ngIf="tagIds&&tagIds.length>0" class="icon-apply dropdown-item"
                                                (click)="dropdown1.hide();setTag()">{{l('setTag')}}</a>
                                            <a *ngIf="tagIds&&tagIds.length>0" class="icon-Clearsearch dropdown-item"
                                                (click)="dropdown1.hide();clearTag()">{{l('clearTag')}}</a>
                                            <a class="icon-jiaoyiguanli dropdown-item"
                                                (click)="goTag()">{{l('manageTag')}}</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2 text-right">
                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                        <label [ngClass]="{'active':!showImage}" class="btn btn-secondary icon-liebiao"
                                            (click)="toggle(true)">
                                            <input type="radio" name="options" id="option1" autocomplete="off" checked>
                                        </label>
                                        <label [ngClass]="{'active':showImage}"
                                            class="btn btn-secondary icon-weibiaoti2010102-copy"
                                            (click)="toggle(false)">
                                            <input type="radio" name="options" id="option2" autocomplete="off">
                                        </label>
                                    </div>
                                </div>

                            </div>
                            <div class="row align-items-center">
                                <!--<Primeng-Datatable-Start>-->
                                <div class="primeng-datatable-container" [busyIf]="MediaPrimeng.isLoading">
                                    <!-- resizableColumns="MediaPrimeng.resizableColumns" -->


                                    <app-image-grid id="gridShow" style="display: none;width: 100%;" gridOwner="ads"
                                        (onOperate)="onOperate($event)" [(selection)]="PersonalCheckedList"
                                        [imageList]="MediaPrimeng.records"></app-image-grid>


                                    <p-table id="tableShow" #PersonalityDataTable (onLazyLoad)="getMedia($event)"
                                        [value]="MediaPrimeng.records" [rows]="MediaPrimeng.defaultRecordsCountPerPage"
                                        [paginator]="false" [lazy]="false" [(selection)]="PersonalCheckedList"
                                        [resizableColumns]="MediaPrimeng.resizableColumns"
                                        responsive="MediaPrimeng.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th>{{l('Actions')}}</th>
                                                <th style="width: 5.0em">
                                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                </th>
                                                <th style="width:5%">{{l('RecordId')}}</th>
                                                <th>
                                                    {{l('Image')}}
                                                </th>
                                                <th>
                                                    ID
                                                </th>
                                                <th>{{l('title')}}</th>
                                                <th>{{l('Tags')}}</th>
                                                <th pSortableColumn="creationTime">
                                                    {{l('CreationTime')}}
                                                    <p-sortIcon field="creationTime"></p-sortIcon>
                                                </th>
                                                <th>{{l('URL')}}</th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                                            <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                                <td>
                                                    <div class="btn-group dropdown" dropdown normalizePosition>
                                                        <button class="dropdown-toggle btn btn-sm btn-primary"
                                                            data-toggle="dropdown" dropdownToggle aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <i class="fa fa-cog"></i>
                                                            <span class="caret"></span> {{l("Actions")}}
                                                        </button>
                                                        <ul class="dropdown-menu" *dropdownMenu>
                                                            <li>
                                                                <a class="icon-huodongliebiao dropdown-item"
                                                                    (click)="goWeb(record)">{{l('detail')}}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td style="width: 5.0em">
                                                    <p-tableCheckbox #TableCheckbox [value]="record"></p-tableCheckbox>
                                                </td>
                                                <td> {{transIndex2(i)}}</td>
                                                <td>
                                                    <img [src]="fixFileUrl(record.thumb_url)" />
                                                </td>
                                                <td>
                                                    <span>{{record.media_id}}</span>
                                                </td>

                                                <td>
                                                    <span>{{record.title}}</span>
                                                </td>
                                                <td>
                                                    <span *ngFor="let tag of record.tags">
                                                        <span style="margin-right:1rem;">{{tag.value}}</span>
                                                    </span>
                                                </td>
                                                <td>
                                                    {{record.creationTime | date:"yyyy/MM/dd"}}
                                                </td>
                                                <td>
                                                    <span>{{record.url}}</span>
                                                </td>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="emptymessage" let-records>
                                            <tr *ngIf="MediaPrimeng.records">
                                                <td colspan="8">
                                                    <img class="emptymessage"
                                                        src="/assets/common/images/placeholder/productinfoHolder.png" />
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="MediaPrimeng.defaultRecordsCountPerPage"
                                            #PersonalityPaginator (onPageChange)="getMedia($event)"
                                            [totalRecords]="MediaPrimeng.totalRecordsCount"
                                            [rowsPerPageOptions]="MediaPrimeng.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{l('TotalRecordsCount', MediaPrimeng.totalRecordsCount)}}
                                        </span>
                                    </div>
                                </div>
                                <!--<Primeng-Datatable-End>-->
                            </div>

                        </tab>
                    </tabset>
                </div>
            </div>
        </div>

        <publicAccountManageModal #publicAccountManageModal (modalSave)="getList()"></publicAccountManageModal>
    </div>

</div>